<template>
    <div class="imgbox">
        <img :src="currentImg" alt=""> 
    </div>
</template>

<script>
import bg1 from "../assets/name1.jpg"
import bg2 from "../assets/name2.jpg"
import bg3 from "../assets/name3.jpg"
import bg4 from "../assets/name4.jpg"
export default {
    name: 'ImageSlider',
    data() {
        return {
            imgList: [
                bg1,bg2,bg3,bg4
            ],
            currentImg: "",
            prevIndex: 0,
            t: null
        }
    },
    // 渲染页面时，每15秒执行一次切换图片
    mounted() {
        // 初始图片
        this.currentImg = this.imgList[this.prevIndex];
        this.t = setInterval(() => {
            this.changeImg();
        }, 15000)
    },
    // 离开此页面时，将每隔15秒自动切换图片取消
    beforeUnmounted() {
        clearInterval(this.t);
    },
    methods: {
        // 切换图片（每次图片都不同）
        changeImg() {
            let i = Math.floor(Math.random() * this.imgList.length);
            while (i === this.prevIndex) {
                i = Math.floor(Math.random() * this.imgList.length);
            }
            this.currentImg = this.imgList[i];
            [this.prevIndex, i] = [i, this.prevIndex];
        }
    }
}
</script>
<style scoped>
.imgbox{
    height: 100%;
    width: 100%px;
    border-radius: 50%;
    /* 溢出部分隐藏 */
    overflow:hidden;
    text-align: center;
}
.imgbox img{
    height: 100%;
    width: 100%;
    /* 使用动画 */
    animation:showImg 15s linear infinite;
}
/* 创建动画 */
@keyframes showImg{
    0%{
        /* 此阶段图片准备慢慢放大 */
        transform:scale(0.05);
        border-radius: 50%;

    }
    50%{
        /* 此阶段图片仍保留在旋转360度的状态，即停顿一会 */
        transform:rotate(360deg);
    }
    100%{
        /* 此阶段图片已缩小到近乎消失 */
        transform:scale(0.05);
        border-radius: 50%;
    }
}
</style>